<template>
    <!-- 人员管理-智能闸机-闸机管理 -->
    <div class="empFaceGate">
        <div class="left">
            <div class="ipt">
                <Input search enter-button placeholder="请输入闸机名称"  style="width:200px"  @on-search="searchAll" v-model="gatekeyword" clearable />
            </div>
            <div class="ipt" style="border-bottom :none; height:50px;">
                <el-button :type="!btnList.includes('emp/faceGate/add')?'info':'primary'"  @click="updateMachRow(0)" :disabled="!btnList.includes('emp/faceGate/add')" size="small" plain>添加闸机</el-button>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="getDetail(item)" :class="faceGateId == item.faceGateId?'active':''">
                    <span  v-if="item.direction == 0" class="direction">出</span>
                    <span  v-if="item.direction == 1" class="direction">进</span>
                    <span  v-if="item.direction == 2" class="direction ">手</span>
                    <span>{{item.name}}</span>
                    <div>
                        <i class="el-icon-edit-outline" @click="updateMachRow(1,item)" :disabled="!btnList.includes('emp/faceGate/edit')"></i>
                        <i class="el-icon-delete" @click="remove(item)" :disabled="!btnList.includes('emp/faceGate/del')"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top">
                <div class="search">
                    <div class="list">
                        <Select v-model="groupId" style="width:150px" placeholder="班组:全部">
                            <Option v-for="(item,index) in groupList" :value="item.groupId" :key="index">{{item.groupName}}</Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="list">
                        <Select v-model="typeId" style="width:150px" placeholder="状态:全部">
                            <Option v-for="(item,index) in typeList" :value="item.id" :key="index">{{item.name}}</Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="list">
                        <Input placeholder="人员姓名搜索"  style="width:150px" v-model="empKeyword" clearable />
                    </div>
                    <div class="list" @click="onSerch">
                        <Button type="primary">搜索</Button>
                    </div>
                    <div class="list" @click="onReset">
                        <Button>重置</Button>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="rightItem" style="margin-right:40px;" v-if="btnList.includes('emp/faceGate/openDoor')&&list.length > 0">
                        <div class="span">闸门开关:</div>
                        <el-button type="primary" @click="openDoorFn" size="small" plain>开门</el-button>
                    </div>
                    <div class="rightItem" v-show="btnList.includes('emp/faceGate/qrCode')&&list.length > 0">
                        <Tooltip  transfer content="点击下载：访客申请二维码" placement="bottom"  max-width='200'>
                            <span @click="downloadImg(faceGateId)" style="width:32px;height:35px;">
                                <vue-qr
                                    :ref="'Qrcode' + faceGateId"
                                    :text="QRcodeUrl"
                                    :margin="10"
                                    :size="500"
                                    color-dark="#000"
                                    :width="30"
                                />
                            </span>
                        </Tooltip>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="down">
                    <el-button :type="list.length == 0?'info':'primary'" @click="updateEmp(1)" size="small" plain :disabled="list.length == 0">添加考勤人员</el-button>
                    <el-button type="primary" size="small"  plain :disabled="batchList.length == 0" @click="allDeal">批量取消授权</el-button>
                </div>
                <div class="table">
                    <el-table :data="empList" :height="tableHeight" :stripe='true' @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" > </el-table-column>
                        <el-table-column label="头像">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar" style="display:block;width:40px;height:40px;border-radius:50%" :preview-src-list="[scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar]" ></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="empName" label="姓名"></el-table-column>
                        <el-table-column prop="phone" label="手机号"></el-table-column>
                        <el-table-column prop="groupName" label="班组"></el-table-column>
                        <el-table-column prop="workTypeName" label="工种"></el-table-column>
                        <el-table-column prop="taskType" label="状态" width="250px">
                            <template slot-scope="scope">
                                <div v-if="scope.row.taskType == 0 || scope.row.taskType == 1 || scope.row.taskType == 2"><span class="blue">授权中</span></div>
                                <div v-if ="scope.row.taskType < 0 ">
                                    <Tooltip  transfer :content="scope.row.stateMessage" placement="top-start"  max-width='200'>
                                        <span class="grey">授权失败</span><span style="color:red;margin-left:4px;">({{scope.row.stateMessage}})</span>
                                    </Tooltip>
                                </div>
                                <div v-if="scope.row.taskType == 11"><span class="orange">取消授权中</span></div>
                                <div v-if ="scope.row.taskType == 3"><span class="green">授权成功</span></div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.keyPositionAuth == 0 && scope.row.keyPositionFlag == 1" @click.native.prevent=" keyPositionAuth(scope.$index, empList,1)" type="text" size="small">认证</el-button>
                                <el-button v-if='btnList.includes("emp/faceGate/fail")' @click.native.prevent="SumbitAddGrant(2 , scope.row.empId)" type="text" size="small" :disabled='scope.row.taskType >=0'>重新授权</el-button>
                                <el-button v-if='btnList.includes("emp/faceGate/delEmps")' style="color:red" :disabled='scope.row.taskType == 11' @click.native.prevent="sigleCancel(scope.$index, empList)" type="text" size="small">取消授权</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="empList.length > 0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加授权人员 -->
        <Modal v-model="AddModal" title="添加授权人员" width="1000px;" :mask-closable="false">
            <div class="msg">
                <div class="search1">
                    <div class="list1">
                        <Select v-model="groupEmpId" style="width:200px" placeholder="班组:全部" @on-change="getGroupEmpType">
                            <Option v-for="(item,index) in groupList" :value="item.groupId" :key="index">{{item.groupName}}</Option>
                        </Select>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="list1">
                         <Input search enter-button placeholder="人员姓名搜索"  style="width:250px"  @on-search="onGrantSearch" @on-enter="onGrantSearch" v-model="grantkeyword" clearable />
                    </div>
                </div>
                <div class="table" style="width:96%;margin:20px auto;">
                    <el-table :data="grantList" style="width: 100%"  @select="listSelectOne" @select-all="listSelectALL" height="500" :stripe='true'>
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column fixed prop="avatar" label="头像">
                            <template slot-scope="scope">
                               <el-image :src="scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar" style="display:block;width:45px;height:45px;border-radius:50%" :preview-src-list="[scope.row.avatar==''||!scope.row.avatar?src:scope.row.avatar]" ></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="empName" label="人员姓名"></el-table-column>
                        <el-table-column prop="groupName" label="班组"></el-table-column>
                        <el-table-column prop="workTypeName" label="工种"></el-table-column>
                        <el-table-column prop="phone" label="电话"></el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="grantList.length>0">
                    <div class="float-right">
                        <Page v-if="grantTotalCount" style="margin: 20px 0;text-align: center;" :current.sync="grantCurrent" :total="grantTotalCount" :page-size="grantPageSize" show-elevator show-total show-sizer @on-change="grantpageChange" @on-page-size-change="grantSizeChange"></Page>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="SumbitAddGrant(1)" v-preventReClick="1500" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>

        <!-- 添加/修改闸机 -->
        <Modal v-model="updateModal" :title="isAdd?'添加闸机':'修改闸机'" width="360px;" :mask-closable="false">
            <div class="item" >
                <span class="tip" v-if="isAdd">*</span>
                <span>闸机品牌:</span>
                <Select v-model="platform" style="width:200px" placeholder="请选择闸机品牌" v-if="isAdd">
                    <Option v-for="(item,index) in platformList" :value="item.platform" :key="index">{{item.name}}</Option>
                </Select>
                <Input v-model="platform" :disabled="true" style="width: 200px" v-if="!isAdd" clearable />
            </div>
            <div class="item" >
                <span class="tip" v-if="isAdd">*</span>
                <span>闸机序列号:</span>
                <Input v-model="deviceKey" placeholder="请输入闸机序列号" :disabled="!isAdd" style="width: 200px" clearable />
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>闸机名称:</span>
                <Input v-model="name" placeholder="请输入闸机名称" style="width: 200px" clearable />
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>方向:</span>
                <Select v-model="directionType" style="width:200px" placeholder="请选择方向">
                    <Option v-for="item in directionList" :value="item.id" :key="item.id">{{item.name}}</Option>
                </Select>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="Sumbit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="deleteGateModal" title="取消授权" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要取消授权吗？</div>
            <div slot="footer">
                <el-button @click="cancel(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="cancelAuth" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="keyPositionModal" :title="empType == 0?'取消认证':'认证'" width="360px;" :mask-closable="false">
            <div style="margin:10px" v-if="empType == 1">确定要认证这条数据吗？</div>
            <div style="margin:10px" v-if="empType == 0">确定要取消认证这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(5)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitKeyPosition" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>

import vueQr from 'vue-qr'
import {
    getFaceGateList,
    getFaceGateEmpList,
    getFaceGateAdd,
    getFaceGateEdit,
    getFaceGateRemove,
    getUnGrantListEmpList,
    getFaceGateEmpGrant,
    getFaceGateEmpRevoke,
    getEmpKeyPositionComfirm,
    getplatformList,
    getEmpOpenDoor,
    getEmpFailList
} from "@/api/api.js";
import {GroupCreate} from "@/mixins/group.js"
export default {
    mixins:[GroupCreate],
    components: { vueQr },
    data() {
        return {
            QRcodeUrl:'',
            current: 1,
            pageSize: 9,
            pageNum: 1,
            list: [],
            totalCount: "",
            empList: [],
            faceGateId: "",
            updateModal: false,
            isAdd: true,
            deviceKey: "",
            name: "",
            updateId: "",
            deleteModal: false,
            deleteId: "",
            src: require("./../../assets/images/emp/gate/nopeople.png"),
            AddModal: false,
            grantCurrent: 1,
            grantPageSize: 10,
            grantPageNum: 1,
            grantTotalCount: "",
            grantList: [],
            empIdGrantList: [],
            empIdList:[],
            directionList: [
                {
                    id: 1,
                    name: "进门"
                },
                {
                    id: 0,
                    name: "出门"
                },
                {
                    id: 2,
                    name: "进出（手持设备）"
                },
            ],
            directionType: 1,
            btnList: [],
            keyword: "",
            deptId: "",
            gatekeyword:'',
            empKeyword:"",
            groupId:"",
            typeId:"",
            grantkeyword:"",
            groupEmpId:'',
            deleteGateModal:false,
            tableHeight:window.innerHeight - 395,
            empId:"",
            empType:"",
            keyPositionModal:false,
            platformList:[],
            platform:"",
            downloadUrl:window.location.origin+"/ms/pages/audit.html?id="+this.faceGateId,
            typeList:[
                {
                    id:"",
                    name: "状态:全部"
                },{
                id:1,
                name:'授权成功'
            },{
                id:2,
                name:'授权中'
            },{
                id:3,
                name:'授权失败'
            }],
            batchList:[]
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.groupId = '';
                this.empKeyword ="";
                this.gatekeyword = "";
                this.empList = [];
                this.getList();
                this.getGRPList(this.deptId);
                this.getplatformRTypeList();
            }
        }
    },
    methods: {
        /* 生成二维码url */
        createURL(){
            let url = ''
            if (process.env.NODE_ENV === "development") {
                //开发环境
                url = 'http://mtest.anculsai.com';
            } else if (process.env.NODE_ENV === "testing") {
                //测试环境
                url = 'http://mtest.anculsai.com';
            } else if (process.env.NODE_ENV === "production") {
                //正式环境
                url = 'https://m.anculsai.com';
            }
            this.QRcodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2d0e9898ecaf587f&redirect_uri=${url}/ms/pages/audit.html?id=${this.faceGateId}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
        },
        handleSelectionChange(items){
            this.batchList = [];
            this.empIdList = []
            items.forEach(item => {
                this.batchList.push(item.empId)
                this.empIdList.push(item.empId)
            })
        },
        allDeal(){
            this.deleteGateModal = true
        },
        openDoorFn(){
            let parmas = {
                faceGateId: this.faceGateId,
            };
            getEmpOpenDoor(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("开门成功");
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        downloadImg(link_id) {
  			const iconUrl = this.$refs['Qrcode' + link_id].$el.src;
  			const a = document.createElement('a')
  			const event = new MouseEvent('click')
  			a.download = link_id
  			a.href = iconUrl
  			a.dispatchEvent(event)
		},
        //查询以接入闸机平台
        getplatformRTypeList(){
            let params = {
                deptId :this.deptId
            }
            getplatformList(params).then(res=>{
                if(res.code == 200) {
                    this.platformList = res.data.list;
                } else {
                    this.$Message.warning(res.msg);
                }

            }).catch(error=>{
                console.log(error)
            })
        },
        //认证
        keyPositionAuth(index, rows, type){
            this.empId = rows[index].empId;
            this.empType = type;
            this.keyPositionModal = true;
        },
        submitKeyPosition(){
            let params = {
                empId:this.empId,
                keyPositionAuth:this.empType,
            }
            getEmpKeyPositionComfirm(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.keyPositionModal =false;
                    this.getEmpList(this.faceGateId);
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })

        },
        getList() {
            let params = {
                deptId: this.deptId,
                keyword:this.gatekeyword,
            };
            getFaceGateList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        if(this.list.length > 0) {
                            if(this.faceGateId){
                                this.getEmpList(this.faceGateId);
                            }else{
                                this.faceGateId = this.list[0].faceGateId;
                                this.getEmpList(this.faceGateId);
                            }
                            this.createURL()
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateMachRow(type, item) {
            if (type == 0) {
                this.isAdd = true;
                this.name = "";
                this.deviceKey = "";
                this.directionType = 1;
            } else {
                this.deviceKey = item.deviceKey;
                this.name = item.name;
                this.updateId = item.faceGateId;
                this.directionType = item.direction;
                this.platform = item.platformName;
                this.isAdd = false;
            }
            this.updateModal = true;
        },
        Sumbit() {
            if(this.platform == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择闸机品牌"
                });
                return;
            }
            if (this.deviceKey == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写闸机序列号"
                });
                return;
            }
            if (this.name == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写闸机名称"
                });
                return;
            }
            if (this.isAdd) {
                let params = {
                    deviceKey: this.deviceKey,
                    name: this.name,
                    deptId: this.deptId,
                    direction: this.directionType,
                    platform:this.platform,
                };
                getFaceGateAdd(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("授权中...");
                            this.updateModal = false;
                            this.pageNum = 1;
                            this.current = 1;
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let params = {
                    faceGateId: this.updateId,
                    name: this.name,
                    deptId: this.deptId,
                    direction: this.directionType
                };
                getFaceGateEdit(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.updateModal = false;
                            this.pageNum = this.pageNum;
                            this.current = this.current;
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        remove(item) {
            this.deleteId = item.faceGateId;
            this.deleteModal = true;
        },
        detele() {
            getFaceGateRemove(this.deleteId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.deleteModal = false;
                        this.pageNum = 1;
                        this.current = 1;
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        searchAll(){
            this.getList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getEmpList(this.faceGateId);
        },
        pageSizeChange(index){
            this.pageSize = index;
            this.getEmpList(this.faceGateId);
        },
        getEmpList(id){
            let params = {
                pageSize:this.pageSize,
                faceGateId:id,
                pageNum:this.pageNum,
                keyword:this.empKeyword,
                groupId:this.groupId,
                type:this.typeId,
            }
            getFaceGateEmpList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.empList = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getDetail(item) {
            this.faceGateId = item.faceGateId;
            this.current = 1;
            this.pageNum = 1;
            this.getEmpList(this.faceGateId);
            this.createURL()
        },
        onSerch() {
            this.pageNum = 1;
            this.current = 1;
            this.getEmpList(this.faceGateId);
        },
        onReset(){
            this.empKeyword = null
            this.typeId = null
            this.groupId = null
            this.pageNum = 1;
            this.current = 1;
            this.getEmpList(this.faceGateId);
        },
        // onSearch(){
        //     this.current = 1;
        //     this.emppageNum = 1;
        //     this.getEmpList(this.faceGateId);
        // },
        // getGroupType(item){
        //     this.groupId = item;
        //     this.current = 1;
        //     this.emppageNum = 1;
        //     this.getEmpList(this.faceGateId);
        // },
        // getTypeFn(item){
        //     this.typeId = item;
        //     this.current = 1;
        //     this.emppageNum = 1;
        //     this.getEmpList(this.faceGateId);
        // },
        //删除授权人员
        sigleCancel(index,rows){
            this.empIdList = [rows[index].empId];
            this.deleteGateModal = true
        },
        cancelAuth(){
            let params = {
                faceGateId : this.faceGateId,
                empIdList:this.empIdList,
            }
            getFaceGateEmpRevoke(params)
            .then(res => {
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.deleteGateModal =false;
                    this.getEmpList(this.faceGateId);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        
        //添加授权人员
        updateEmp(type){
            this.AddModal = true;
            if(type == 1){
                this.getGrantList(this.faceGateId);
            }else{
                this.getFailListFn(this.faceGateId);
            }
        },
        getFailListFn(id){
            let params = {
                faceGateId: id,
                pageNum: this.grantPageNum,
                pageSize: this.grantPageSize,
                keyword: this.grantkeyword,
                groupId: this.groupEmpId,
            }
            getEmpFailList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.grantList = res.data.list;
                        this.grantTotalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getGrantList(id){
            let params = {
                faceGateId: id,
                pageNum: this.grantPageNum,
                pageSize: this.grantPageSize,
                keyword: this.grantkeyword,
                deptId: this.deptId,
                groupId:this.groupEmpId,
            }
            getUnGrantListEmpList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.grantList = res.data.list;
                        this.grantTotalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        grantpageChange(index) {
            this.grantPageNum = index;
            this.getGrantList(this.faceGateId);
        },
        grantSizeChange(index){
            this.grantPageSize = index;
            this.getGrantList(this.faceGateId);
        },
        onGrantSearch(){
            this.grantPageNum = 1;
            this.grantCurrent = 1
            this.getGrantList(this.faceGateId);
        },
        getGroupEmpType(item){
            this.groupEmpId = item;
            this.grantPageNum = 1;
            this.grantCurrent = 1
            this.getGrantList(this.faceGateId);
        },
        //多选
        listSelectOne(selection, row) {
            this.empIdGrantList = selection;
        },
        //全选
        listSelectALL(selection, row) {
            this.empIdGrantList = selection;
        },
        SumbitAddGrant(type , empId) {
            let arr = [];
            if(type == 1){
                this.empIdGrantList.forEach(i => {
                    arr.push(i.empId);
                });
                if (arr.length == 0) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "请勾选授权人员"
                    });
                    return;
                }
            }else if(type == 2){
                arr.push(empId)
            }
            let params = {
                faceGateId: this.faceGateId,
                empIdList: arr
            };
            getFaceGateEmpGrant(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("授权中...");
                        this.AddModal = false;
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 1) {
                this.updateModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.AddModal = false;
            } else if (type == 4) {
                this.deleteGateModal = false;
            } else if (type == 5) {
                this.keyPositionModal = false;
            }
        },

    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getList();
        this.getGRPList(this.deptId);
        this.getplatformRTypeList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    }
};
</script>


<style scoped lang="less">
// @import "./../../assets/style/emp.less";
@import "./../../assets/style/themeBase.less";
.empFaceGate {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: #f5f5f5;
    .left{
        width: 250px;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        scrollbar-width: none;
        .ipt{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #BFBFBF;
        }
        ul{
            width: 230px;
            margin:0 auto;
            // margin-top: 20px;
            height: calc(100% - 150px);
            overflow-y: scroll;
            list-style: none;
            overflow-y: scroll;
            li{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                cursor: pointer;
                background: #f9f9f9;
                margin-bottom: 5px;
                span{
                    width: 180px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    margin-left: 10px;
                }
                div{
                    width: 50px;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    i{
                        cursor: pointer;
                        margin-right: 10px;
                    }
                }
            }
            .active{
                background:var(--themeColor);
                color: #fff;
                .direction{
                    background: rgba(255, 255, 255, .4);
                }
            }
        }
        .tree{
            width: 250px;
            margin:0 auto;
            margin-top: 20px;
            height: calc(100% - 100px);
            overflow-y: scroll;
        }
        .tree::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        .tree {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        .tree {
            -ms-overflow-style: none;
        }
        ul::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        ul {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        ul {
            -ms-overflow-style: none;
        }
    }
    .right {
            flex: 1;
            margin-left: 10px;
            overflow: hidden;
            .top{
                width: 100%;
                height: 72px;
                padding: 0 20px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .search {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .btnList{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        height: 32px;
                        background: #fff;
                        border-radius: 3px ;
                        border: 1px solid #C0BFBE;
                        margin-right: 20px;
                        .item{
                            width: 70px;
                            height: 32px;
                            line-height: 32px;
                            text-align: center;
                            color: #646566;
                            border-right: 1px solid var(--themeColor);
                            cursor: pointer;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            &.active{
                                color: #fff;
                                background-color: var(--themeColor);
                            }
                            &:last-of-type{
                                border-right: none;
                            }
                        }
                    }
                    .list {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-right: 20px;
                        span {
                            margin-right: 6px;
                        }
                    }
                }
                .rightBox{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .rightItem{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .span{
                            width: 80px;
                        }
                    }
                }
            }
            .bottom{
                width: 100%;
                height: calc(100% - 82px);
                margin-top: 10px;
                padding: 20px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 10px;
                .down {
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: flex-start;
                }
            }
            
    }
}

.item {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    position: relative;
    padding-left: 16px;
    .tip {
        position: absolute;
        top:8px;
        left:0;
        color: red;
        font-size: 16px;
    }
}
.direction{
    width: 40px !important;
    height: 40px;
    background: var(--themeColor1);
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}
.grey{
    display:inline-block;
    background-color:rgba(169, 176, 187, 0.1);
    border-radius:2px;
    border:1px solid #A9B0BB;
    color:#A9B0BB;
    padding:2px 10px;
}
.green{
    display:inline-block;
    background-color: rgba(63, 207, 119, 0.1);
    border:1px solid #28D79C;
    color: #3FCF77;
    border-radius:2px;
    padding:2px 10px;
}
.blue{
    display:inline-block;
    background-color: rgba(33, 237, 243, 0.1);
    border:1px solid #21EDF3;
    color: #21EDF3;
    border-radius:2px;
    padding:2px 10px;
}
.orange{
    display:inline-block;
    background-color:rgba(255, 166, 77, 0.1);
    border:1px solid #FFA64D;
    color: #FFA64D;
    border-radius:2px;
    padding:2px 10px;
}

.msg {
    width: 96%;
    margin: 0 auto;
    p {
        font-size: 18px;
        text-align: center;
    }
    .list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .item {
            width: 30%;
            display: flex;
            justify-content: flex-start;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            span {
                display: block;
                width: auto;
                height: 32px;
                line-height: 32px;
            }
            // span:first-child {
            //     width: 120px;
            //     // text-align: center;
            // }
            .tip {
                position: absolute;
                top:8px;
                left:0;
                color: red;
                font-size: 16px;
            }
        }
    }
    /deep/.el-table__fixed-right::before,
    /deep/.el-table__fixed::before{
        display: none !important;
    }
}
.search1 {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .list1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 20px;
        span{
            width: 70px;
        }
    }
}
</style>
